<script setup>
import { Dumbbell, Users, Trophy, Sparkles } from "lucide-vue-next"

const features = [
  {
    icon: Dumbbell,
    title: "课程管理",
    desc: "系统提供丰富多样的课程选择，涵盖力量训练、有氧课程、瑜伽普拉提等不同类型，用户可以根据自身需求与目标快速浏览并预约心仪的课程。同时，系统支持课程余量实时更新和提醒，避免因满员错过机会；教练则能够灵活安排教学计划，有效利用时间和场地资源。"
  },
  {
    icon: Users,
    title: "会员服务",
    desc: "每一位会员都拥有独立的电子档案，包含个人基本信息、健身目标、健康状况和训练记录。系统会根据用户的历史训练数据生成可视化的成长曲线，让会员更直观地看到自己的变化与进步；同时结合健身目标推荐个性化训练方案，让用户在科学的指导下持续提升。"
  },
  {
    icon: Trophy,
    title: "数据统计",
    desc: "系统集成强大的数据统计和分析功能，不仅可以生成详细的出勤率、课程热度、会员活跃度报表，还能帮助管理层洞察趋势、发现潜在问题。运营者可以利用这些数据制定更精准的营销策略，提升会员粘性，打造良性循环的健身生态。"
  }
]
</script>

<template>
  <div class="introduction-page">
    <!-- 顶部横幅 -->
    <section class="hero">
      <h1 class="hero-title">欢迎来到健身房预约管理系统</h1>
      <p class="hero-subtitle">健康 · 激情 · 专业 · 成长</p>
    </section>

    <!-- 系统简介 -->
    <section class="about">
      <Sparkles class="about-icon" />
      <h2 class="about-title">系统简介</h2>
      <div class="about-text">
        <p>
          本健身房预约管理系统是一套面向会员、教练和管理者的综合性平台，旨在解决传统健身房运营中信息零散、预约混乱、统计困难等问题。
          它通过信息化、智能化的方式，将课程、会员、教练、场地与数据紧密整合，为健身房的日常运作提供全方位支持。
        </p>
        <p>
          系统采用现代化的设计理念，拥有直观清晰的界面与高效的操作逻辑。无论是年轻用户还是初次接触健身的新人，都能在几分钟内快速上手，
          完成课程查询、预约、签到等操作，让运动不再受时间与空间的限制。
        </p>
        <p>
          对于教练，系统提供强大的排课与学员管理功能。教练可以灵活安排课程计划，实时掌握学员出勤情况与反馈记录，并针对性地调整教学策略。
          这种数据驱动的教学方式，不仅提升了课程质量，也让学员的成长路径更加科学合理。
        </p>
        <p>
          管理者则可以通过后台实时掌握健身房的整体运营情况，包括会员活跃度、课程热度、场地利用率等多维度数据报表。
          系统的数据统计功能帮助管理层快速识别问题、优化资源配置，并制定更具前瞻性的经营决策。
        </p>
        <p>
          此外，系统还特别注重用户体验与服务延伸。它支持多终端登录，会员可以随时随地查看课程信息；
          同时提供智能提醒、积分奖励、活动通知等多种辅助功能，让健身不再只是单一的运动行为，而是融入生活的长期习惯。
        </p>
        <p>
          总体而言，本系统不仅仅是一款管理工具，更是一种健身房现代化运营的全新模式。
          它通过技术手段提升效率，通过数据洞察助力决策，通过服务优化增强体验，真正实现了“让每一次健身都更有价值”的目标。
        </p>
      </div>
    </section>

    <!-- 功能展示 -->
    <section class="features">
      <div
          v-for="(feature, index) in features"
          :key="index"
          class="feature-card"
      >
        <component :is="feature.icon" class="feature-icon" />
        <h3>{{ feature.title }}</h3>
        <p>{{ feature.desc }}</p>
      </div>
    </section>

    <!-- 底部寄语 -->
    <section class="footer-note">
      <p>
        健身，是自我挑战与突破的过程。本系统将陪伴您每一步，让训练更科学、目标更清晰、成果更可见。
        愿每一位用户在这里收获健康与力量，在坚持中遇见更好的自己！
      </p>
    </section>
  </div>
</template>

<style scoped>
.introduction-page {
  font-family: 'Segoe UI', sans-serif;
  color: #333;
  line-height: 1.9;
}

/* 顶部横幅 */
.hero {
  background: linear-gradient(135deg, #ff9a9e, #fad0c4);
  padding: 60px 20px;
  text-align: center;
  color: white;
}

.hero-title {
  font-size: 46px;
  font-weight: bold;
  margin-bottom: 12px;
}

.hero-subtitle {
  font-size: 20px;
  letter-spacing: 3px;
}

/* 系统简介 */
.about {
  background: #fff;
  padding: 50px 80px;
  text-align: left;
}

.about-icon {
  width: 40px;
  height: 40px;
  color: #f39c12;
  display: block;
  margin: 0 auto 20px;
}

.about-title {
  text-align: center;
  font-size: 30px;
  margin-bottom: 25px;
}

.about-text p {
  margin-bottom: 18px;
  font-size: 18px; /* 字体更大 */
  text-indent: 2em;
}

/* 功能模块 */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
  padding: 40px 60px;
}

.feature-card {
  background: white;
  border-radius: 14px;
  padding: 25px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
  text-align: left;
}

.feature-icon {
  width: 34px;
  height: 34px;
  color: #3498db;
  margin-bottom: 12px;
}

/* 底部寄语 */
.footer-note {
  background: #f5f5f5;
  padding: 40px 20px;
  font-size: 17px;
  font-style: italic;
  text-align: center;
}
</style>
